<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  <span>全名：{{ person.fullName }}</span>
  <br />
  全名：<input type="text" v-model="person.fullName" />
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    let person = reactive({
      firstName: "郭",
      lastName: "san",
    });
    //简写只考虑读
    // person.fullName=computed(()=>{
    // 	return person.firstName+"-"+person.lastName
    // })
    //全写考虑读和写
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value){
        const arr=value.split("-")
		person.firstName=arr[0]
		person.lastName=arr[1]
	  },
    });
    return {
      person,
    };
  },
};
</script>

